<template>
  <div class="w-rule-actions">
    <div v-for="(action, i) in modelValue" :key="'action' + i" class="w-rule-action">
      <el-select style="width: 100%" v-model="action.targets" multiple placeholder="选择需要联动表单字段">
        <el-option
          :key="item.id"
          v-for="item in optionsData"
          :value="item.id"
          :label="item.title"
          :disabled="item.disabled"
        ></el-option>
      </el-select>
    </div>
  </div>
</template>

<script setup>
import useFlowStore from "@/store/modules/gkflow.js";
import { computed } from "vue";

const props = defineProps({
  modelValue: {
    type: Array,
    default: () => []
  },
  options: {
    type: Array,
    default: () => []
  },
  selectedRule: {
    type: Object,
    default: () => ({ condition: {}, action: {} })
  },
  addText: {
    type: String,
    default: "添加联动"
  }
});

const flowStore = useFlowStore();

const formConfig = computed(() => {
  return flowStore.design?.formConfig || {};
});
const optionsData = computed(() => {
  const selectedFields = getSelectedFields();
  return (
    props.options?.map(item => {
      return {
        ...item,
        disabled: selectedFields.includes(item.id)
      };
    }) ?? []
  );
});

const getSelectedFields = () => {
  let selectedFields = [];
  formConfig.value.rules?.forEach(item => {
    selectedFields = selectedFields.concat(item.action.with[0].targets ?? []);
  });
  return [...selectedFields, props.selectedRule?.condition?.condition?.field ?? ""];
};
</script>

<style scoped lang="scss">
.w-rule-actions {
  position: relative;
  margin: 15px 0;
  padding: 10px 0;
  border-radius: 5px;
  .w-rule-actions-add {
    position: absolute;
    padding: 5px;
    top: -15px;
    left: calc(50% - 95px);
    background: white;
  }
  .w-rule-action {
    position: relative;
    margin: 7px 0;
    padding: 8px;
    border-radius: 5px;
    background: #f7f7f9;
    .icon {
      cursor: pointer;
      position: absolute;
      right: 0;
      top: -12px;
      padding: 5px;
      border-radius: 50%;
      background: white;
      box-shadow: 0 0 10px 0 #e8e8e8;
      &:hover {
        color: #f56c6c;
      }
    }
  }
}
</style>
